<template>
  <div>
    <Add ref="add" @ok="search"></Add>
    <Update ref="update" @ok="search"></Update>
    <RelatedProducts ref="relatedProducts" @ok="search"></RelatedProducts>
    <ZgNewPage
      ref="page"
      :title="pageTitle"
      :showInlineBtn="false"
      :uniqueName="uniqueName"
      :pageOpt="pageOpt"
      :dataBtns="dataBtns"
      :extraBtns="extraBtns"
      :headers="headers"
      :conditions="conditions"
      :adminWidth="0"
      @search="onSearch"
      @filter="onFilter"
      @admin="toAdmin"
      @extra="toExtra"
    >
      <template slot="columns">
        <a-table-column
          v-for="(h, i) in headers"
          :key="`column${i}`"
          :width="h.width === 0 ? 'auto' : h.width"
          align="center"
          :title="h.label"
        >
          <template slot-scope="record">
            <template v-if="h.code === 'state'">
              <ZgSwitch v-model="record[h.code]"></ZgSwitch>
            </template>
            <template v-else>{{ record[h.code] }}</template>
          </template>
        </a-table-column>
      </template>
      <template slot="thMode" slot-scope="scope">
        <a-row :gutter="10">
          <a-col :span="4" v-for="t in scope.list" :key="`thMode_${t.id}`">
            <a-card class="mb10">
              <div class="wfull h100 scroll">
                {{ t }}
              </div>
            </a-card>
          </a-col>
        </a-row>
      </template>
    </ZgNewPage>
  </div>
</template>
<script>
const productCategoryList = [
  { label: '应收类', value: 'shouldAccept' },
  { label: '预付类', value: 'prepay' },
  { label: '存货类', value: 'inventory' }
]
export default {
  components: {
    Add: () => import('./Add.vue'),
    Update: () => import('./Update.vue'),
    RelatedProducts: () => import('./RelatedProducts.vue')
  },
  data() {
    return {
      pageTitle: '产品类型',
      uniqueName: 'test',
      pageOpt: {
        showConditionBtn: true,
        showHeaderConfig: true,
        showAttachBtn: true,
        showPageTitle: false
      },
      conditions: [
        {
          code: 'productType',
          compType: '单行文本',
          label: '产品类型',
          defaultVal: '',
          extra: {
            placeholder: '请输入产品类型'
          }
        },
        {
          code: 'productCategory',
          compType: '下拉选择',
          label: '产品分类',
          defaultVal: '',
          extra: { 下拉选项: productCategoryList, placeholder: '请选择产品分类' }
        }
      ],
      headers: [
        { code: 'type', label: '产品类型', isShow: true, sort: 0 },
        { code: 'amount', label: '额度区间（万）', isShow: true, sort: 0 },
        { code: 'rate', label: '利率区间（%）', isShow: true, sort: 0 },
        { code: 'term', label: '贷款期限（月）', isShow: true, sort: 0 },
        { code: 'state', label: '状态', isShow: true, sort: 0 },
        { code: 'updateTime', label: '更新时间', isShow: true, sort: 0 }
      ],
      dataBtns: [
        {
          key: 'detail',
          name: '详情',
          type: 'link',
          isShow: () => {
            return true
          }
        },
        {
          key: 'edit',
          name: '编辑',
          type: 'link',
          isShow: () => {
            return true
          }
        },
        {
          key: 'delete',
          name: '删除',
          type: 'link',
          isShow: () => {
            return true
          }
        },
        {
          key: 'relatedProduct',
          name: '关联产品',
          type: 'link',
          isShow: () => {
            return true
          }
        },
        {
          key: 'relationCredit',
          name: '关联授信',
          type: 'link',
          isShow: () => {
            return true
          }
        }
      ],
      extraBtns: [{ key: 1, name: '新增', icon: 'plus-circle', type: 'primary' }],
      // 网关前缀
      gateWayPrefix: '/zg-scf'
    }
  },
  methods: {
    search() {
      this.$refs.page.search()
    },
    onSearch(param) {
      this.$http.post(`${this.gateWayPrefix}/scf/productType/page`, { ...param }, (data) => {
        const { total, records } = data
        this.$refs.page.endSearch({
          total: Number(total),
          list: records.map((item) => {
            const { amountLow, amountHigh, rateLow, rateHigh, termLow, termHigh } = item
            return Object.assign(item, {
              amount: `${amountLow}-${amountHigh}`,
              rate: `${rateLow}-${rateHigh}`,
              term: `${termLow}-${termHigh}`,
              state: Number(item.state)
            })
          })
        })
      })
    },
    onFilter(f, param) {},
    toAdmin(param) {
      if (param.key === 1) {
        this.$refs.update.open({}, 'details')
      } else if (param.key === 2) {
        this.$refs.update.open()
      } else if (param.key === 3) {
        this.confirm(() => {
          // this.$http.post('/zg-system/attach/del', [param.obj.id], () => {
          //   this.$refs.page.search()
          // })
        }, '确定要删除这条数据么')
      } else if (param.key === 4) {
        this.$refs.relatedProducts.open()
      }
    },
    toExtra(opt) {
      this.$refs.add.open()
    }
  }
}
</script>

<style lang="scss" scoped></style>
